<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script src="/static/js/echarts.min.js" th:src="@{js/echarts.min.js}"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>学院返校情况展示</title>
    <!-- Bootstrap core CSS -->
    <link href="asserts/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="asserts/css/dashboard.css" th:href="@{/css/dashboard.css}" rel="stylesheet">
</head>

<body>

<!--引入topbar-->
<div th:replace="~{commons/bar::topbar}"></div>
<div class="container-fluid">
    <div class="row">
        <!--引入sidebar-->
        <div th:replace="~{commons/bar::#sidebar(activeUri='school')}"></div>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">

            <div style="width: 1218px; height: 700px">
                <div id="container1" style="width: 50%; height: 300px; float: left"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container1'));
                    option = {
                        title: {
                            text: '学生返校意愿统计',
                            top: '4%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow',

                            }
                        },
                        xAxis: {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                interval: 'auto',
                            },
                        },
                        yAxis: {
                            type: 'category',
                            data: ['不返校','暂缓返校','确认返校']
                        },
                        series: [
                            {
                                barWidth : 30,//柱图宽度
                                name: '累计人数',
                                type: 'bar',
                                data: [41, 103, 520]
                            }
                        ]
                    };
                    myChart.setOption(option)
                </script>

                <div id="container2" style="width: 50%; height: 300px; float: right"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container2'));
                    var data1 = [{
                        name: '确认返校',
                        value: 520
                    }, {
                        name: '暂缓返校',
                        value: 41
                    }, {
                        name: '不返校',
                        value: 103
                    }];
                    option = {
                        title: {
                            text: '返校意愿占比分析',

                            top: '4%'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b} : {c} ({d}%)'
                        },
                        legend: {
                            type: 'scroll',
                            orient: 'vertical',
                            right: 10,
                            top: 20,
                            bottom: 20,
                            data: data1,

                            selected: data1.selected
                        },
                        series: [
                            {
                                type: 'pie',
                                top: '10%',
                                radius: '65%',
                                center: ['50%', '50%'],
                                data: data1,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };

                    myChart.setOption(option)
                </script>

                <div id="container3" style="width: 50%; height: 300px; float: left"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container3'));
                    option = {
                        title: {
                            text: '各年级学生返校人数统计',
                            top: '4%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow',

                            }
                        },
                        xAxis: {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                interval: 'auto',
                            },
                        },
                        yAxis: {
                            type: 'category',
                            data: ['大一','大二','大三','大四']
                        },
                        series: [
                            {
                                barWidth : 30,//柱图宽度
                                name: '累计人数',
                                type: 'bar',
                                data: [46, 114, 323, 37]
                            }
                        ]
                    };
                    myChart.setOption(option)
                </script>

                <div id="container4" style="width: 50%; height: 300px; float: right"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container4'));
                    var data1 = [{
                        name: '大一',
                        value: 46
                    }, {
                        name: '大二',
                        value: 114
                    }, {
                        name: '大三',
                        value: 323
                    }, {
                        name: '大四',
                        value: 37
                    }];
                    option = {
                        title: {
                            text: '各年级学生返校人数占比分析',

                            top: '4%'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b} : {c} ({d}%)'
                        },
                        legend: {
                            type: 'scroll',
                            orient: 'vertical',
                            right: 10,
                            top: 20,
                            bottom: 20,
                            data: data1,

                            selected: data1.selected
                        },
                        series: [
                            {
                                type: 'pie',
                                top: '10%',
                                radius: '65%',
                                center: ['50%', '50%'],
                                data: data1,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };

                    myChart.setOption(option)
                </script>

                <div id="container5" style="width: 50%; height: 300px; float: left"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container5'));
                    option = {
                        title: {
                            text: '返校方式统计',
                            top: '4%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        xAxis: {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                interval: 'auto',
                            },
                        },
                        yAxis: {
                            type: 'category',
                            data: ['飞机', '自驾汽车', '长途汽车', '高铁', '火车']
                        },
                        series: [
                            {
                                barWidth : 30,//柱图宽度
                                name: '累计人数',
                                type: 'bar',
                                data: [2, 67, 128, 154, 169]
                            }
                        ]
                    };
                    myChart.setOption(option)
                </script>

                <div id="container6" style="width: 50%; height: 300px; float: right"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container6'));
                    var data1 = [{
                        name: '飞机',
                        value: 2
                    }, {
                        name: '自驾汽车',
                        value: 67
                    }, {
                        name: '长途汽车',
                        value: 128
                    }, {
                        name: '高铁',
                        value: 154
                    }, {
                        name: '火车',
                        value: 169
                    }];
                    option = {
                        title: {
                            text: '返校方式占比分析',
                            top: '4%'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b} : {c} ({d}%)'
                        },
                        legend: {
                            type: 'scroll',
                            orient: 'vertical',
                            right: 10,
                            top: 20,
                            bottom: 20,
                            data: data1,

                            selected: data1.selected
                        },
                        series: [
                            {
                                type: 'pie',
                                top: '10%',
                                radius: '65%',
                                center: ['50%', '50%'],
                                data: data1,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };

                    myChart.setOption(option)
                </script>

                <div id="container7" style="width: 50%; height: 300px; float: left"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container7'));
                    option = {
                        title: {
                            text: '省内返校人数TOP5地区',
                            top: '4%'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: ['扬州', '盐城', '南通', '淮安', '宿迁', '徐州']
                        },
                        series: [
                            {
                                barWidth : 30,//柱图宽度
                                name: '返校人数',
                                type: 'bar',
                                data: [52, 52, 57, 63, 71, 93]
                            }
                        ]
                    };
                    myChart.setOption(option)
                </script>

                <div id="container8" style="width: 50%; height: 300px; float: right"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container8'));
                    option = {
                        title: {
                            text: '省外返校人数TOP5地区',
                            top: '4%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        xAxis: {
                            type: 'value',
                            minInterval: 1,
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: ['达州', '芜湖', '合肥', '六安', '亳州']
                        },
                        series: [
                            {
                                barWidth : 30,
                                name: '返校人数',
                                type: 'bar',
                                data: [2, 2, 2, 3, 3]
                            }
                        ]
                    };
                    myChart.setOption(option)
                </script>

            </div>
        </main>
    </div>
</div>
</body>
</html>






